<template>
  <div class="public-form">
    <div class="query-container">
      <el-form inline
               label-width="90px"
               style="overflow: hidden;">
        <div style="width:81%;float: left">
          <el-form-item v-if="menuId == 311 || menuId == 314 || menuId == 315 || 
                              menuId == 317 || menuId == 318 || menuId == 321 || 
                              menuId == 322 || menuId == 328 || menuId == 329 ||
                              menuId == 331 || menuId == 335 || menuId == 336 || 
                              menuId == 357 || menuId == 367 || menuId == 368 ||
                              menuId == 332"
                        label="月份"
                        :required="true">
            <el-date-picker v-model="time"
                            style="width: 226px"
                            type="monthrange"
                            range-separator="至"
                            start-placeholder="开始月份"
                            end-placeholder="结束月份"
                            :picker-options="pickerOptions"
                            @change="selectMonth">
            </el-date-picker>
          </el-form-item>
          <el-form-item v-else-if="menuId == 333 || menuId == 334"
                        label="发货时间"
                        :required="true">
            <el-date-picker v-model="fromTime"
                            style="width: 226px"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd"
                            clearable
                            @change="fromTimeGive">
            </el-date-picker>
          </el-form-item>
          <el-form-item v-else
                        label="年份"
                        :required="true">
            <el-select v-model="particularYear"
                       style="width: 226px"
                       placeholder="请选择年份"
                       @input="clearYear">
              <el-option v-for="item in yearList"
                         :key="item.id"
                         :label="item.name"
                         :value="item.name" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="menuId == 333 || menuId == 334"
                        label="合同编号">
            <el-input v-model="params.contractNo"
                      style="width: 226px"
                      placeholder="请输入合同编号"></el-input>
          </el-form-item>
          <el-form-item v-if="menuId == 311 || menuId == 313 || menuId == 314 || 
                                menuId == 315 || menuId == 317 || menuId == 333 ||
                                menuId == 334 || menuId == 335 || menuId == 368 ||
                                menuId == 318"
                        label="发货方名称">
            <el-input v-model="params.customerName"
                      style="width: 226px"
                      placeholder="请输入发货方名称"></el-input>
          </el-form-item>
          <el-form-item v-if="menuId == 321 || menuId == 327 || menuId == 328 || 
                                menuId == 329 || menuId == 331 || menuId == 367 || 
                                menuId == 332"
                        label="承运方名称">
            <el-input v-model="params.carrierName"
                      style="width: 226px"
                      placeholder="请输入承运方名称"></el-input>
          </el-form-item>
          <el-form-item v-if="menuId == 333 || menuId == 334 || menuId == 322"
                        label="收货方名称">
            <el-input v-model="params.consigneeName"
                      style="width: 226px"
                      placeholder="请输入收货方名称"></el-input>
          </el-form-item>
          <el-form-item v-if="menuId == 357"
                        label="运单类型">
            <el-select v-model="params.orderTypeName"
                       placeholder="请选择"
                       style="width: 226px"
                       clearable>
              <el-option v-for="(item,index) in orderTypeOption"
                         :key="index"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="menuId == 333 || menuId == 334"
                        label="运输模式">
            <el-select v-model="params.transportMode"
                       placeholder="请选择"
                       style="width: 226px"
                       clearable>
              <el-option v-for="(item,index) in ModeOptions"
                         :key="index"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="menuId == 333 || menuId == 334"
                        label="已关单">
            <el-select v-model="params.isClose"
                       placeholder="请选择"
                       style="width: 226px"
                       clearable>
              <el-option v-for="(item,index) in isCloseList"
                         :key="index"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="menuId == 333 || menuId == 334"
                        label="到达省">
            <el-input v-model="params.toProvince"
                      style="width: 226px"
                      placeholder="请输入到达省"></el-input>
          </el-form-item>
          <el-form-item v-if="menuId == 333 || menuId == 334"
                        label="到达市">
            <el-input v-model="params.toCity"
                      style="width: 226px"
                      placeholder="请输入到达市"></el-input>
          </el-form-item>
        </div>
        <div style="width:202px;float: right">
          <el-form-item style="float: right">
            <el-button type="primary"
                       icon="el-icon-search"
                       @click="search(1)">查询</el-button>
            <el-button type="primary"
                       icon="el-icon-delete"
                       @click="resetForm">清除</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="bottom-container">
      <el-form v-if="menuId == 333 || menuId == 334"
               style="overflow: hidden">
        <el-form-item style="float: right">
          <ExportExcelAction :list="tableData"
                             :name="derive.name"
                             :type="derive.type"
                             :args="params"
                             :url="'/export/task'"></ExportExcelAction>
          <!-- <el-button type="default"
                     icon="el-icon-s-promotion"
                     @click="handleExport">导出</el-button> -->
        </el-form-item>
      </el-form>
      <el-form v-else
               style="overflow: hidden">
        <el-form-item style="float: right">
          <el-button type="default"
                     icon="el-icon-s-promotion"
                     @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form>
      <el-table ref="tableData"
                v-loading="loading"
                class="tableCss"
                :class="showSummary(menuId)?'table-container':'table-containers'"
                stripe
                border
                :data="tableData"
                element-loading-text="加载中"
                element-loading-spinner="el-icon-loading"
                :show-summary="showSummary(menuId)"
                :summary-method="getSummaries"
                @sort-change="sortChange">
        <el-table-column v-for="(column, index) in columns"
                         :key="index"
                         :show-overflow-tooltip="true"
                         :prop="column.prop"
                         :label="column.name"
                         :width="column.width?column.width:''"
                         :min-width="column.minWidth?column.minWidth:''"
                         :align="column.align?column.align:'right'"
                         :sortable="column.sortable?'custom':false">
          <template slot-scope="scope">
            <span v-if="column.prop == 'contractNo' &&
                      (menuId == 333 || menuId == 334)">
              <span :show-overflow-tooltip="true"
                    :style="scope.row.isClose?'width: 100px;':'width: 128px;'"
                    style="display: inline-block;">{{scope.row[column.prop]}}</span>
              <section v-if="scope.row.isClose"
                       class="section-wrap closePrompt">
                <el-tooltip class="item"
                            effect="dark"
                            content="发货方运单已关闭"
                            placement="top-start">
                  <span><i class="el-icon-warning-outline closePrompt"></i></span>
                </el-tooltip>
              </section>
            </span>
            <span v-else-if="(menuId == 318 || menuId == 332) && //综合评分超时率展示
                              column.tooltip">
              <section class="section-wrap">
                <el-tooltip class="item"
                            effect="dark"
                            :content="textTyep(column.prop, scope.row)"
                            placement="top-start">
                  <span>{{digitalConversion(scope.row.rate[column.prop])}}</span>
                </el-tooltip>
              </section>
              <icon-svg v-if="column.check && scope.row.rate[column.prop]"
                        class-name="iconClass"
                        icon-name="chakan1"
                        @click="dialogMulti(scope.row, column.prop)" />
            </span>
            <span v-else-if="column.rmsData">
              {{transitionText(scope.row, column.rmsData, column.prop)}}</span>
            <span v-else-if="column.align != 'left'">
              {{conversion(scope.row[column.prop])}}</span>
            <span v-else>{{scope.row[column.prop]}}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="(menuId == 311 || menuId == 321 || menuId == 322 ||
                                  menuId == 335) && tableData.length > 0"
                         label='操作'
                         width="80"
                         align="center">
          <template slot-scope="scope">
            <span style="color:var(--prev-color-primary);cursor: pointer"
                  @click="dialog(scope.row)">明细</span>
          </template>
        </el-table-column>
        <el-table-column v-if="(menuId == 367 || menuId == 368) && tableData.length > 0"
                         label='操作'
                         width="80"
                         align="center">
          <template slot-scope="scope">
            <span style="color:var(--prev-color-primary);cursor: pointer"
                  @click="dialog(scope.row)">异常明细</span>
          </template>
        </el-table-column>
      </el-table>
      <span v-show="tableData.length > 0 && menuId != 367 && menuId != 368"
            style="color: var(--prev-color-primary);">说明:由于四舍五入的原因，本页合计和总合计可能存在误差。</span>
      <el-pagination v-show="tableData.length > 0"
                     background
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"
                     :page-sizes="pageSizeOptions"
                     :page-size.sync="pageSize"
                     :current-page.sync="pageNo"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <el-dialog :title="shipName+'明细'"
               :visible.sync="dialogVisible"
               width="98%"
               :value.sync="shipData"
               :before-close="handleClose">
      <RmsDetail :value.sync="shipData"
                 :ship-time="shipTime"
                 :ship-type="shipType"></RmsDetail>
    </el-dialog>
  </div>
</template>
  
  <script src="./rmsJs/PublicForm.js"></script>
  
  <style scoped>
.table-container >>> .el-table__body-wrapper {
  height: calc(100% - 168px);
  overflow-y: auto;
}

.table-containers >>> .el-table__body-wrapper {
  height: calc(100% - 58px);
  overflow-y: auto;
}

.bottom-container >>> .el-pagination {
  margin-top: 20px;
  /* text-align: right; */
}
.bottom-container >>> .el-table tr {
  background-color: var(--prev-bg-white);
  height: 50px;
  font-size: 14px;
}
.public-form >>> .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-bottom: 1px solid var(--prev-border-color-lighter);
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 20px;
  color: #333333;
  opacity: 1;
}
</style>
  <style lang="scss" scoped>
.public-form {
  width: 100%;
  height: 100%;
  .query-container {
    padding: 20px 20px 0 0;
    background: var(--prev-bg-white);
  }
  .bottom-container {
    padding: 20px;
    margin-top: 12px;
    background: var(--prev-bg-white);
    height: calc(100vh - 270px);
    .tableCss {
      height: calc(96% - 110px);
      .target-power {
        display: flex;
        .power {
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .closePrompt {
    font-size: 20px;
    color: var(--prev-color-primary);
    line-height: inherit;
    float: right;
  }
  .el-table {
    overflow: visible !important;
  }
  .iconClass {
    height: 13px;
    padding: 0 7px;
  }
  section {
    display: inline-block;
  }
}
</style>
  